<template>
	<view class="myShop">
		<mescroll-uni :down="downOption" :up="upOption"  :fixed="false" ref="mescrollRef" @init="mescrollInit"
						@down="downCallback" @up="upCallback">
			<view class="myShop_head">
				<view class="back" @click="navigateBack()">
				</view>
				<view class="flex aitem_cener info" v-if="flag">
					<view class="auttar">
						<image :src="details.img" mode=""></image>
					</view>
					<view class="">
						<view class="shopName">
							{{details.name}}的店铺
						</view>
						<view class="auth">已实名</view>
					</view>
				</view>
				<view class="sign aitem_cener flex"  v-if="flag">
					<image class="edit_icon" src="../../static/myshop/edit_line@2x.png" mode=""></image>
					<input class="weui-input" disabled="" name="count" :placeholder="details.text || '店铺还没有简介哦~'" />
				</view>
			</view>
			<view class="myShop_content"  v-if="flag">
				<view class="flex just_betbeen">
					<view class="title">
						店铺商品
					</view>
					<view class="flex aitem_cener right_btn" @click="game_show=true">
						{{game_name}}
						<image class="" src="../../static/myshop/down_line@2x.png" style="width: 32rpx;height:32rpx"></image>
					</view>
				</view>
				<view class="shop_list">

						<view class="shop_list_card"  @click="navigateTo('popularDetail', `?id=${item.id}`)" v-for="item in list_data" :key="item.id">
							<view class="contentImg">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="flex just_betbeen pd ">
								<view class="tag">
									<text class="tag_inner">放心购</text>
									小时赔付
								</view>
								<view class="count">
									<text>{{item.game_name}}</text>
								</view>
							</view>
							<view class="content">{{item.title}}</view>
							<view class="flex just_betbeen pd10 aitem_cener">
								<view class="price">
									<text class="unit">￥</text>
									{{item.price}}
								</view>
							</view>
						</view>
					
				</view>
			</view>
		</mescroll-uni>
		<u-picker :show="game_show" :columns="[game_data]" keyName="name" :closeOnClickOverlay="true" title="排序"
			@close="cancel" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-empty text="店铺不存在" mode="car" style="margin-top: 100rpx;" v-if="!flag"></u-empty>
	</view>
</template>

<script>
	import { shop_details, shop_list } from '@/api/shop'
	import { game_list_all } from '@/api/game'
	
	export default {
		data() {
			return {
				game_data: [],
				game_id: null,
				game_show: false,
				game_name: "",
				id: null,
				loading: false,
				flag: true,
				details: {},
				list_data: [],
				mescroll: null,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多了 --', // 没有更多数据的提示文本
					offset: 1,
					noMoreSize: 2,
					empty: {
						icon: '',
						tip: '没有数据~试试修改筛选条件或查看其他游戏'
					},
					page: {
						num: 1,
						size: 10
					}
				},
				page: 1,
				pageSize: 10,
				total: null, //服务器数量
				localTotal: 0, //本地已经加载数量
			}
		},
		onLoad(option) {
			this.game_list_all()
			if ('id' in option) {
				this.id = option.id
				this.shop_details(option.id)
			}else {
				this.flag = false
			}
		},
		onShow() {},
		methods: {
			async game_list_all(){
				let data = await game_list_all()
				if (data) {
					this.game_data = data.data
				}
			},
			async shop_details(id){
				let data = await shop_details({id})
				if (data) {
					this.details = data.data
					this.flag = true
					this.game_id = data.data.game_id
					this.game_name = data.data.game_name
					this.shop_list(id, data.data.game_id)
				}else {
					this.flag = false
				}
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// //全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			async shop_list() {
				this.loading = true
				let param = {
					page: this.page,
					pageSize: this.pageSize,
					id: this.id,
					game_id: this.game_id
				}
				console.log(param)
				let data = await shop_list(param)
				this.loading = false
				data = data.data
				if (this.page == 1) {
					this.list_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.list_data = [...this.list_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			downCallback() {
				this.page = 1
				this.shop_list()
			},
			upCallback(page) {
				this.page += 1
				this.shop_list()
			},
			cancel() {
				this.game_show = false
			},
			confirm(row) {
				this.game_id = row.value[0].id
				this.game_name = row.value[0].name
				this.game_show = false
				this.mescroll.triggerDownScroll()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.myShop {

		height: 100vh;
		overflow-y: scroll;
		.myShop_head {
			height: 380rpx;
			background: url(~@/static/myshop/bg@2x.png) no-repeat;	
			background-size: 100%;
			padding-top: 85rpx;
			// border: 1px solid green;
			.back {
				display: block;
				height: 30px;
				width: 30px;
				margin-left: 35rpx;
				background: url(~@/static/myshop/down_line@2x.png) no-repeat;
				background-size: 100%;
				transform: rotate(90deg);
			}
			.info {
				margin: 50rpx 0 55rpx 35rpx;
			}
			.auttar {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: beige;
				margin-right: 15rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.shopName {
				font-weight: 800;
				font-size: 32rpx;
				color: #22150B;
				line-height: 38rpx;
			}
			.auth {
				margin-top: 30rpx;
				font-weight: bold;
				font-size: 20rpx;
				color: #22150B;
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #FDD637;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
			}
			.sign {
				height: 60rpx;
				background: #FFF5D2;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				margin: 35rpx;
				padding: 0 35rpx;
			}
			.edit_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 35rpx;
			}
			.weui-input {
				font-size: 20rpx;
				color: #6C6C6C;
				line-height: 23rpx;
				width: 100%;
			}
		}
		.myShop_content {
			background: #F7F8FA;
			position: relative;
			padding: 0 35rpx;
			
			&::after {
				content: "";
				position: absolute;
				top: -40rpx;
				left: 0;
				right: 0;
				width: 100%;
				height: 40rpx;
				background-color: #F7F8FA;
				border-radius: 60rpx 60rpx 0px 0rpx;
			}
			.just_betbeen {
				justify-content: space-between;
			}
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #22150B;
			}
			.right_btn {
				padding: 0 15rpx;
				font-weight: bold;
				font-size: 20rpx;
				color: #22150B;
				// width: 168rpx;
				height: 52rpx;
				background: #FDD637;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
			}
			.shop_list {
				margin-top: 35rpx;
			}
			.shop_list_card {
				margin-bottom: 15rpx;
				height: 444rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.contentImg {
					height: 230rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.pd10 {
				padding: 10rpx;
			}
			.pd {
				padding:  20rpx 10rpx 10rpx 10rpx;
			}
			.content {
				margin: 0 10rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #22150B;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.num {
				font-weight: 500;
				font-size: 20rpx;
				color: #6C6C6C;
			}
			.price {
				font-weight: bold;
				font-size: 32rpx;
				color: #FF2020;
				.unit {
					font-size: 20rpx;
				}
			}
			.count {
				font-weight: 500;
				font-size: 20rpx;
				color: #6C6C6C;
				line-height: 23rpx;
				.bar {
					display: inline-block;
					padding: 0 8rpx;
				}
			}
			.tag {
				font-weight: 500;
				font-size: 20rpx;
				color: #22150B;
				padding-right: 8rpx;
				background: #FFF6D6;
				border-radius: 100rpx;
				border: 2rpx solid #FDD637;
				.tag_inner {
					display: inline-block;
					padding: 8rpx;
					box-sizing: border-box;
					font-weight: 500;
					font-size: 20rpx;
					color: #22150B;
					margin-right: 8rpx;
					background: #FDD637;
					border-radius: 100rpx;
				}
			}
		}
	}
</style>